{% extends 'layout.html' %}

{% load static %}

{% block main %}
<div class="d-flex justify-content-center mt-4">
    <form class="col-md-4" action="{% url 'register' %}" method="post">
        {% csrf_token %}
        <div class="form-group">
            <label for="{{ form.email.id_for_label }}" class="mb-2">注册邮箱:</label>
            {{ form.email }}
            <div id="invalid-email" class="text-danger">
                {{ form.errors.email }}
            </div>
        </div>
        <div class="form-group">
            <label for="{{ form.captcha.id_for_label }}" class="my-2">验证码:</label>
            <div class="input-group">
                {{ form.captcha }}
                <button id="captcha-button" class="btn btn-outline-secondary is-valid" type="button">获取验证码</button>
            </div>
            <div id="invalid-email" class="text-danger">
                {{ form.errors.captcha }}
            </div>
        </div>
        <div class="form-group">
            <label for="{{ form.username.id_for_label }}" class="my-2">用户名:</label>
            {{ form.username }}
            <div id="invalid-email" class="text-danger">
                {{ form.errors.username }}
            </div>
        </div>
        <div class="form-group">
            <label for="{{ form.password.id_for_label }}" class="my-2">密码:</label>
            {{ form.password }}
            <div id="invalid-email" class="text-danger">
                {{ form.errors.password }}
            </div>
        </div>
        <div class="form-group mt-4">
            <button class="btn btn-secondary" type="submit">注册</button>
        </div>
    </form>
</div>
{% endblock %}

{% block script %}
<script src="{% static 'js/looke.js' %}"></script>
{% endblock %}